<template>
    <div>
        <h3>{{ title }}</h3>
        <p>counter: {{ counter }}</p>
        <p>doubleCounter: {{ doubleCounter }}</p>
        <p>multCounter: {{ multCounter(10) }}</p>
        <button @click="addCounter">counter + 1</button>&nbsp;
        <button @click="resetCounter">resetCounter</button>
        <p>现在的时间是：{{ clock }}</p>
    </div>
</template>

<script>
import { toRefs } from 'vue'
import useCounter from './useCounter'
import useClock from './useClock'

export default {
    props: {
        title: String,
        initialCounter: Number,
    },
    setup(props) {

        // toRefs: 创建对 props 的 'initialCounter' 的响应式引用
        const { initialCounter } = toRefs(props);

        const {
            counter,
            addCounter,
            resetCounter,
            doubleCounter,
            multCounter,
        } = useCounter(initialCounter)

        const { clock } = useClock()

        return {
            counter,
            addCounter,
            resetCounter,
            doubleCounter,
            multCounter,
            clock
        }


    }
}
</script>

<style lang="scss" scoped>
</style>